<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数式组件</title>
  </head>
  <body>
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 创建函数式组件
      // 注意：
      // 1. 组件要大写，因为在 React 中组件标签大写
      // 2. ReactDOM.render(vdom)中，vdom 要使用闭合标签写法

      // 拓展：
      // ES5 中禁止函数里面的 this 指向 window（babel为严格模式，自主设为严格模式同样）
      function MyComponent() {
        console.log(this)
        const vdom = <p>我是函数式组件，适用于【简单组件】的定义</p>
        return vdom
      }

      ReactDOM.render(<MyComponent />, document.getElementById('test'))

      // 解析：
      // 函数组件解析过程：
      // 1. 解析组件标签，找到当前组件
      // 2. 解析当前组件内容，并呈现在当前页面中
    </script>
  </body>
</html>
